<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Hugo博客的自定义配置 &middot; MY Blog</title>

  
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-08 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/rliners_technology_blog/"><h1>MY Blog</h1></a>
      <p class="lead">
       这里是Rliner的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/rliners_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>Hugo博客的自定义配置</h1>
  <time datetime=2019-08-12T22:05:39&#43;0800 class="post-date">Mon, Aug 12, 2019</time>
  <h3 id="hugo博客自定义配置">#Hugo博客自定义配置</h3>
<p>Hugo博客自定义配置
原创lislie_ 最后发布于2019-07-20 15:52:04 阅读数 1146  收藏
展开
1.文章参数配置</p>
<p>修改文件 archetypes\default.md
可参考：
<a href="https://github.com/lisliehaha/myHugoBlog/blob/master/blog/archetypes/default.md">https://github.com/lisliehaha/myHugoBlog/blob/master/blog/archetypes/default.md</a></p>
<p>2.站点属性配置</p>
<p>将主题下面的 themes\even\exampleSite\config.toml 文件复制到站点根目录，进行参数修改调整
可参考：
<a href="https://github.com/lisliehaha/myHugoBlog/blob/master/blog/config.toml">https://github.com/lisliehaha/myHugoBlog/blob/master/blog/config.toml</a></p>
<p>3.图标自定义</p>
<p>上阿里巴巴矢量库进行图标下载。
打开图标管理 -&gt; 我的项目 -&gt; hugo-blog，将选择好的图标加入购物车，加入项目，修改下图标的名称（名称改为icon-xxx）、注意调整大小和颜色。
————————————————</p>
<p>将hugo的themes\even\src\fonts\iconfont目录下的4个文件用下载的对应文件替换掉。</p>
<p>修改themes\even\src\css_iconfont.scss 文件，格式可参考代码：</p>
<pre><code>/* Social Icon */
.icon-email:before {
  content: &quot;\e64d&quot;;
  position: relative;
  top: -2px;
}
</code></pre><p>其中content为下载图标的Unicode值，在图标属性中可以查看。</p>
<p>修改的配置要生效的话还需要安装node.js 和 yarn
对主题进行静态打包构建：</p>
<pre><code>cd ./themes/even/
 yarn install
 yarn build
</code></pre><p>将themes\even\layouts\partials\header.html里的partials\header.html文件结构复制到站点根目录下的layouts中，对站点根目录下layouts\partials\header.html文件进行修改。</p>
<pre><code>&lt;nav class=&quot;site-navbar&quot;&gt;
  &lt;ul id=&quot;menu&quot; class=&quot;menu&quot;&gt;
    {{ range .Site.Menus.main -}}
      &lt;li class=&quot;menu-item&quot;&gt;
        &lt;a class=&quot;menu-item-link&quot; href=&quot;{{ .URL | safeURL }}&quot;&gt;&lt;i class=&quot;iconfont icon-{{ .Identifier}}&quot;&gt;&lt;/i&gt;{{ .Name }}&lt;/a&gt;
      &lt;/li&gt;
    {{- end }}
  &lt;/ul&gt;
&lt;/nav&gt;
</code></pre><p>最后在config.toml文件中修改对应图标的名称。</p>
<p>4.自定义颜色，背景等</p>
<p>主要修改*\static\css\custom.css* 文件和 \themes\even\src\css\variables.scss 文件
可参考：
<a href="https://github.com/lisliehaha/myHugoBlog/blob/master/blog/static/css/custom.css">https://github.com/lisliehaha/myHugoBlog/blob/master/blog/static/css/custom.css</a></p>

</div>


    </main>

    
  </body>
</html>
